<template>
    <div id="Floor">
        <van-tabs v-model="active">
            <!-- 所有楼层 -->
            <van-tab v-for="(item, index) in floorList" :key="item.id" :title="item.name" >
                <!-- 自习室列表 -->
                <van-grid :column-num="2">
                    <!-- <van-grid-item v-for="value in 4" :key="value" icon="chat-o" :text="'ngg'+index+'w ' + value" :to="{path:'seatlist', query: {sid: value}}" /> -->
                    <van-grid-item v-for="(item, index) in classroomList" :key="item.id" icon="chat-o" color="#1989fa" :text="item.name"
                        :to="{path:'seatlist', query: {classroomId: item.id}}" >
                    </van-grid-item>
                </van-grid>

            </van-tab>
        </van-tabs>
    </div>

</template>

<script>
    export default {
        name: 'Floor',
        data() {
            return {
                active: 0,
                sid: 0,
                floorList: [],
                classroomList: [],
            }
        },
        watch: {
            active(val) { //普通的watch监听
                // console.log("active：" + val);
                this.loadClassroomListById(val + 1);
            },
        },
        components: {},
        methods: {
            loadFloorList() {
                let that = this;
                this.$axios.get('/api/seatlist/floor/all')
                    .then(function(response) {
                        console.log("Success", response);
                        // 解析数据
                        // console.log("log2", response.data.data);
                        that.floorList = response.data.data;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            loadClassroomListById(classroomId) {
                let that = this;
                this.$axios.get('/api/seatlist/classroom/' + classroomId)
                    .then(function(response) {
                        // console.log("Success", response);
                        // 解析数据
                        // console.log("log2", response.data.data);
                        that.classroomList = response.data.data;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        },
        created() {
            this.loadFloorList();
            this.loadClassroomListById(1);
        },

    }
</script>

<style lang="css" scoped="scoped">


</style>
